<template>
  <view class="content" :style="{ paddingTop: H_content + 10 + 'px', paddingBottom: '50px' }">
    <view class="title-area" :style="{ height: H_content + 10 + 'px' }">
      <view :style="{ height: H_top + 'px' }"></view>
      <view class="nav-bar-title" :style="{ fontSize: '36rpx;', height: H_height + 'px', lineHeight: H_height + 'px', textAlign: 'center', color: '#000' }">
        <image @click="search" style="margin-left: 5%; height: 48rpx;width: 24rpx;" src="/static/lzl/fanhui@2x.png" mode=""></image>
        <!-- <view class="" style="padding-left: 5%;"><u-icon name="arrow-left" color="#000" size="36"></u-icon></view> -->
        <!-- <view style="margin-left: 50%;transform: translateX(-100%);font-size: 32rpx;">亚麻艺术家</view> -->
        <view style="display: flex;align-items: center;margin-left: 30rpx; font-size: 32rpx;">
          <view class="">{{ obj.name }}</view>
        </view>
      </view>
    </view>
    <!-- 下方 -->
    <view class="" style="padding: 20rpx 32rpx;">
      <!-- /下面的商品 -->
      <view class="shoop">
        <view class="shoop_son" v-for="(item, index) in list" @click="toDetlis(item)" :key="index">
          <image :src="item.image" style="width: 330rpx;height: 400rpx;" mode=""></image>
          <view class="price">
            <view class="bt">{{ item.title }}</view>
            <view class="btPrice">￥{{ item.price }}</view>
          </view>
        </view>
      </view>
    </view>
    <view v-show="list.length == 0" style="font-size: 32rpx;margin-top: 50%;margin-left: 50%;transform: translateX(-20%);color: #c8c8c8;" class="">暂无商品</view>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  computed: {
    ...mapState(['H_top', 'H_height', 'H_content'])
  },
  data() {
    return {
      obj: {},
      page: 1,
      list: []
    };
  },
  onReachBottom() {
    if (this.list.length < this.page * 10) return;
    this.page++;
    this.init();
  },
  onLoad(options) {
    let n = JSON.parse(options.item);
    this.obj = n;
    console.log(n, '99999999');
    this.init();
  },
  methods: {
    // 点击跳转详情
    toDetlis(item) {
      uni.navigateTo({
        url: '/pages/details/details?id=' + item.id
      });
    },
    async init() {
      let m = await this.$api.lists({
        page: this.page,
        category_id: this.obj.id
      });
      // this.list = n.data.data;
      if (this.page != 1) {
        this.list = [...this.list, ...m.data.data];
      } else {
        this.list = m.data.data;
      }
    },
    search() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="scss">
* {
  box-sizing: border-box;
}
.title-area {
  width: 100%;
  background-color: #fff;
  color: #000;
  position: fixed;
  z-index: 9999999;
  top: 0;
  left: 0;
}
.nav-bar-title {
  display: flex;
  // justify-content: ;
  align-items: center;
}
.shoop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 34rpx;
  .shoop_son {
    width: 330rpx;
    margin-bottom: 32rpx;
    .price {
      text-align: center;
      .bt {
        margin-top: 16rpx;
        margin-bottom: 8rpx;
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0a0a09;
        overflow: hidden; //超出文本隐藏
        line-height: 50rpx;
        text-overflow: ellipsis; ///超出部分省略号显示

        display: -webkit-box; //弹性盒模型

        -webkit-box-orient: vertical; //上下垂直

        -webkit-line-clamp: 2; //自定义行数
      }
      .btPrice {
        font-size: 28rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #5c5a55;
        line-height: 48rpx;
      }
    }
  }
}
</style>
